<template>
  <div style="background-color: azure;flex: auto;">
    <!--    图片和详情框-->
    <div style="padding: 50px;display: flex;margin: 10px 200px;">
      <!--      图片的位置-->
      <el-image
          style="width: 500px; height: auto;"
          :src="products.bookInfo.imgUrl" />
      <!--      详情框-->
      <div class="recommend">
        <div>
          <h3  style="margin: 20px 0">{{products.bookInfo.title}}</h3>
          <el-descriptions title="" :column="1" border>
            <el-descriptions-item label="书名" :label-style=labelStyle :contentStyle=rowStyle>{{products.bookInfo.title}}</el-descriptions-item>
            <el-descriptions-item label="作者" :label-style=labelStyle :contentStyle=rowStyle>{{products.bookInfo.author}}</el-descriptions-item>
            <el-descriptions-item label="出版社" :label-style=labelStyle :contentStyle=rowStyle>{{products.bookInfo.publisher}}</el-descriptions-item>
            <el-descriptions-item label="价格" :label-style=labelStyle :contentStyle=rowStyle_price>¥{{products.goodInfo.price}}</el-descriptions-item>
            <el-descriptions-item label="库存" :label-style=labelStyle :contentStyle=rowStyle>{{ products.goodInfo.stock }}</el-descriptions-item>
            <el-descriptions-item label="发货地址" :label-style=labelStyle :contentStyle=rowStyle>{{ products.goodInfo.shippingAddress }}</el-descriptions-item>
            <el-descriptions-item label="销量" :label-style=labelStyle :contentStyle=rowStyle>{{ products.goodInfo.sales }}</el-descriptions-item>
            <el-descriptions-item label="承诺" :label-style=labelStyle :contentStyle=rowStyle>七天无理由，包邮</el-descriptions-item>
            <el-descriptions-item label="购买数量" :label-style=labelStyle :contentStyle=rowStyle>
              <el-input-number v-model="num" @change="handleChange" :min="1" label="请选择购买的数量"></el-input-number>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </div>
    <!--  这里是按钮栏-->
    <div style="padding: 50px 0;margin: 0 50px;background-color: rgba(255,242,204)">
      <el-row>
        <el-col :span="12" align="center"><el-button icon="el-icon-s-goods" class="my-button" @click="addCart">加入购物车</el-button></el-col>
        <el-col :span="12" align="center">
          <el-button icon="el-icon-check" type="danger" class="my-button" @click="buy">立即购买</el-button>
        </el-col>
      </el-row>
    </div>
    <!--    商品详情部分-->
    <div class="price-info">
      <div class="container">
        <h2 style="margin: 20px 0;color: #d71d3f">商品详情</h2>
        <div class="desc" v-html="proUrl">
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Detail",
  created() {
    this.initData();
  },
  data(){
    return{
      // 商品详情的HTML
      proUrl: "",
      // 购买者的信息
      user: {},
      // 商品的信息
      products: [],
      // 购买的数量
      num: 1,
      // 描述内容样式
      rowStyle: {
        'text-align': 'center',
        'height': '65px',
        'font-size': '15px',
        'background': '#FDE2E2',
      },
      // 描述标签样式
      labelStyle:{
        'text-align': 'center',
        'font-size': '15px',
        'background': '#E1F3D8',
      },
      // 价格标红
      rowStyle_price: {
        'text-align': 'center',
        'height': '65px',
        'font-size': '25px',
        'background': '#FDE2E2',
        'color': 'rgba(255,68,0)'
      },
    }
  },
  methods: {
    initData(){
      // 从session中取出登陆者的信息
      let str = localStorage.getItem("user") || "{}";
      console.log(str)
      // 解析str
      this.user = JSON.parse(str);
      // 从session中取出商品的信息
      let str2 = sessionStorage.getItem("goodInfo") || "{}";
      console.log(str2)
      // 解析str
      this.products = JSON.parse(str2);
      console.log(this.products)
    },
    buy() {
      // request.get("/order/buy",{
      //   params:{
      //     itemId: this.itemData.id,
      //     userId: this.user.id,
      //     count: this.num
      //   }
      // }).then(res => {
      //   this.$message.success("即将进入支付页面~~~");
      //   // 直接通过返回的链接打开新窗口
      //   alert("即将进入支付页面，请注意支付环境安全")
      //   window.open(res.data,"_self");
      // })
    },
    handleChange(){
    },
    addCart(){
      // this.$confirm('是否确定加入购物车?', '==================', {
      //   confirmButtonText: 'Yes',
      //   cancelButtonText: 'No',
      //   type: 'warning'
      // }).
      // then(() => {
      //   request.get('/order/add',{
      //     params: {
      //       itemId: this.itemData.id,
      //       userId: this.user.id,
      //       count: this.num
      //     }
      //   }).
      //   then(res => {
      //     this.$message.success("加入购物车成功~");
      //   });
      // }).
      // catch(() => {
      //   this.$message({
      //     type: 'error',
      //     message: '取消加入购物车'
      //   });
      // });
    }
  }
}
</script>

<style scoped>
.recommend{
  float: right;
  background-color: rgba(255,242,232);
  padding: 10px;
  width: 70%;
  margin-left: 30px;
  height: auto;
}
.recommend h3{
  font-size: 20px;
  color: #d71d3f;
  margin-left: 30px;
}
.recommend el-descriptions-item{
  padding: 10px;
  height: 100%;
}
.my-button{
  height: 70px;
  width: 200px;
  font-size: 25px;
  border-radius: 4px;
  color: white;
  background-color: rgba(255,68,0);
}

.price-info {
  text-align: center;
  background-color: #f3f3f3;
  height: auto;
  margin: 50px;
}

h2 {
  font-size: 24px;
  color: #333333;
  padding-top: 38px;
  margin-bottom: 30px;
  border-bottom: coral 2px solid;
  line-height: 50px;
}

.attributes-list {
  width: 749px;
  display: block;
  clear: both;
  margin: 20px auto;
  min-height: 50px;
  text-align: left;
}

li {
  display: inline;
  float: left;
  width: 206px;
  height: 24px;
  margin-right: 20px;
  overflow: hidden;
  text-indent: 5px;
  line-height: 24px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

</style>